/* eslint-disable react/jsx-pascal-case */
import { FC } from 'react'
import { ModalProps } from 'antd'
import { Checkbox, Input, Button } from 'antd'
import { Modal, Form, FormProps } from '../index'
import './login.scss'
interface Props {
  modalProps?: ModalProps
}

const Login: FC<Props> = ({ modalProps }) => {
  const formItemConfig: FormProps['formItemConf'] = [
    { conf: { label: '昵称', name: 'userName', hasFeedback: true, validateFirst: 'parallel', rules: [{ required: true, message: '请填写用户名' }] }, node: <Input placeholder='用户名/邮箱' /> },
    {
      conf: { label: '密码', name: 'password', hasFeedback: true, validateFirst: 'parallel', rules: [{ required: true, message: '请认真填写密码' }] },
      node: <Input.Password placeholder='密码' />,
    },
    {
      conf: {},
      style: { marginBottom: '0' },
      node: (
        <div className='options'>
          <Checkbox>记住我</Checkbox>
          <Button type='link'>忘记密码</Button>
        </div>
      ),
    },

    {
      conf: {},
      node: (
        <div className='loginBox'>
          <Button type='primary' htmlType='submit' className='login-form-button'>
            登录
          </Button>
          或者
          <Button type='link'>马上注册!</Button>
        </div>
      ),
    },
  ]
  return (
    <Modal.default
      modalProps={{ footer: <></>, title: 'Login', ...modalProps, width: '30%' }}
      content={
        <Form
          formProps={{
            name: 'login',
            labelCol: { span: 5 },
            wrapperCol: { span: 16 },
          }}
          formItemConf={formItemConfig}
        />
      }
    />
  )
}

export default Login
